<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }

        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
        }

        .box1, .box2, .box3 {
            float: left;
        }

        .box4 {
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
    </div>

    <!-- 1.对父元素和后面元素有影响：outer元素没有被内容撑开，同时后面的div会往上顶 -->
    <!-- <div style="background-color: orange;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque sapiente ab culpa quibusdam soluta unde possimus recusandae officia fuga voluptatum quo, magni ea officiis tempore quae commodi in sunt facilis!</div> -->

    <!-- 2.对前面元素没影响：浮动元素对之前的元素没有影响 -->


    <!-- 父元素的宽度，依然能束缚浮动的元素 -->

    <!-- 浮动的元素，不能浮动到之前没浮动的元素之前。而浮动元素之后的元素，能占据浮动元素的位置。虽然元素浮动了，但是它本质上还是在父元素的管辖之内，受到父元素的宽度约束。 -->
    <!-- 浮动和不浮动，其实就是两层，一个天上一个地上，在地上的会按顺序排列，在天上的同样会按顺序排列，不存在谁浮的更高，谁浮的更矮，同样需要依次排列 -->
</body>
</html>